import React, { useRef, useState } from 'react';
import PageTitle from '@/components/PageTitle';
import { Button, Input, message, Modal, Typography } from 'antd';
import Tables from '@/hoc/Tables';
import styles from './index.less';
import { connect, history } from 'umi';
import { DELIVER_LIST } from '@/services/list';
import PageInfoSearch from '@/components/PageInfoSearch';
import { deleteExpressInfo, insertExpressInfoData } from '@/services/addliver';
import { GenericProps, TableProps } from '@/global.d';
const { Text } = Typography;

const Delivery: React.FC<GenericProps> = props => {
  const childRef = useRef<TableProps | any>();
  let {
    userData,
    route: { name },
    location,
  } = props;
  let pathname = location?.pathname;
  let flag: boolean = false;
  if (name == '印章收取管理') {
    flag = true;
  }
  let columns: any[] = [
    {
      title: '序号',
      dataIndex: 'key',
      key: 'key',
    },
    {
      title: '快递公司',
      dataIndex: 'courierServicesCompany',
      key: 'courierServicesCompany',
    },
    {
      title: '快递单号',
      dataIndex: 'courierNumber',
      key: 'courierNumber',
    },
    {
      title: '快递状态',
      dataIndex: 'state',
      key: 'state',
      render: (_: any, item: any) => <span>{Boolean(item?.state) ? '已签收' : '已发出'}</span>,
    },
    {
      title: '操作',
      width: 250,
      render: (item: any) => (
        <div className="operation">
          <span
            onClick={() => {
              onEdit(item);
            }}>
            查看
          </span>

          <span
            onClick={() => {
              if (!item?.state) onisDis(item);
            }}>
            <Text disabled={item?.state}>{flag ? '上传' : '编辑'}</Text>
          </span>

          {flag ? (
            ''
          ) : (
            <span
              onClick={() => {
                onDetil(item);
              }}>
              删除
            </span>
          )}
        </div>
      ),
    },
  ];
  const [courierNumber, setCourierNumber] = useState<string>('');

  /**
   * 查看
   */
  const onEdit = (item: insertExpressInfoData) => {
    history.push(`${pathname}/add?id=${item.id}&disabled=true`);
  };

  /**
   * 删除
   */
  const onDetil = (item: insertExpressInfoData) => {
    Modal.confirm({
      title: '删除提示',
      content: '确定要删除此条快递信息吗？',
      okText: '确定',
      cancelText: '取消',
      onOk() {
        deleteExpressInfo({ id: item?.id }).then((res: any) => {
          if (res?.responseCode == 200) {
            message.success('删除成功');
            childRef.current.setQuery({});
          }
        });
      },
    });
  };

  /**
   * 编辑
   */
  const onisDis = (item: insertExpressInfoData) => {
    history.push(`${pathname}/add?id=${item.id}&flag=${flag ? 1 : 0}`);
  };

  /**
   * 添加用户
   */
  const adddelivery = () => {
    history.push(`${pathname}/add`);
  };

  return (
    <div className={styles.regimePage}>
      <PageTitle title={name} />
      <PageInfoSearch addfn={flag ? undefined : adddelivery}>
        <Input style={{ width: 280 }} onChange={e => setCourierNumber(e.target.value)} placeholder="请输入运单号进行查询" allowClear />
        <Button
          onClick={() => {
            childRef.current.setQuery({});
          }}
          style={{ marginLeft: 20 }}
          className="btn_cold">
          查询
        </Button>
      </PageInfoSearch>
      <div className="regime_table">
        <Tables option={{ id: userData?.id, courierNumber: courierNumber }} childRef={childRef} url={DELIVER_LIST} columns={columns} />
      </div>
    </div>
  );
};

export default connect(({ login }: { [index: string]: any }) => ({ userData: login.userData }))(Delivery);
